<template>
  <div class="common-layout">
    <el-container>
      <el-header>
          <div class="title">
              <el-row justify="start">
                  <h1 style="margin-top: 20px; margin-left: 10px;">
                      EasyBrain
                  </h1>
                  <a href="/" id="exit">退出登录</a>
              </el-row>
          </div>
      </el-header>
      <el-container>
      <el-aside>
          <el-row class="tac">
            <el-col :span="16">
              <el-menu router
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
              > 
                <el-menu-item index="/home">
                  <el-icon><location /></el-icon>
                  <span>我的主页</span>
                </el-menu-item>
                <el-menu-item index="/device">
                  <el-icon><Monitor /></el-icon>
                  <span>设备管理</span>
                </el-menu-item>
                <el-menu-item index="/flow">
                  <el-icon><document /></el-icon>
                  <span>流程管理</span>
                </el-menu-item>
                <el-menu-item index="/info">
                  <el-icon><setting /></el-icon>
                  <span>个人信息</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <div class="dataForm">
            <el-row justify="end">
                  <!-- Form -->
                <el-button type="primary" @click="dialogFormVisible = true">
                  添加新设备
                </el-button>
                <el-dialog v-model="dialogFormVisible" title="添加新设备">
                    <el-form :model="form">
                      <!-- <el-form-item label="设备名称" :label-width="formLabelWidth">
                        <el-input v-model="form.deviceId" autocomplete="off" style="width: 350px;"/>
                      </el-form-item> -->
                      <el-form-item label="设备序列号" :label-width="formLabelWidth">
                        <el-input v-model="form.serialNum" autocomplete="off" style="width: 350px;"/>
                      </el-form-item>
                      <!-- <el-form-item label="设备状态" :label-width="formLabelWidth">
                        <el-radio-group v-model="form.status" class="ml-4">
                          <el-radio label="1" size="large">运行</el-radio>
                          <el-radio label="2" size="large">终止</el-radio>
                        </el-radio-group>
                      </el-form-item> -->
                      <el-form-item label="备注（设备描述？）" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="form.description" style="width: 350px;"/>
                      </el-form-item>
                    </el-form>
                    <template #footer>
                      <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="dialogFormVisible = false">
                          添加
                        </el-button>
                      </span>
                    </template>
                  </el-dialog>  
            </el-row><br>
            <el-table :data="tableData" height="250" style="width: 100%">
              <el-table-column prop="deviceId" label="设备编号" />
              <el-table-column prop="serialNum" label="设备序列号" />
              <el-table-column prop="deviceName" label="设备名称" />
              <el-table-column prop="status" label="设备状态" />
              <el-table-column prop="description" label="设备描述" />
              <el-table-column label="操作">
                  <el-button link type="primary" size="small">删除</el-button>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
import { reactive,ref } from 'vue'
import { getDevice } from '@/utils/request'

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form =reactive({
    deviceId: '',
    serialNum: '',
    deviceName: '',
    description: '',
    status: ''
})
// 导航
const activeIndex='/device'
var tableData = [
  {
    deviceId: 1,
    serialNum: "123456SN",
    deviceName: "摄像头",
    description: "这是一段描述",
    status: "运行"
  },
]
onMounted(()=>{
  getDevice().then(res=>{
    console.log(res)
    tableData=res.data
  })
})

</script>
<style>
.title{
  border-bottom:1px solid black;
}
.dataForm{
  width: 800px;
}
.add{
  width: 200px;
}
</style>
